import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Modal, Form, Select, Input, Icon, message} from 'antd';

@inject('thesis')
@observer
class AddThesis extends Component{
  constructor(props) {
    super(props);
  }

  onSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(err !== null) return;
      this.saveEdit(values)
    })
  }

  async saveEdit(thesis) {
    await this.props.thesis.edit(thesis);
    this.props.form.resetFields();
    message.success(this.props.thesis.editState === 'add' ? '添加论文成功' : '修改论文成功');
    this.props.thesis.hideEdit();
  }

  onCancel = () => {
    this.props.form.resetFields();
    this.props.thesis.hideEdit();
  }

  render() {
    let thesis = this.props.thesis.editThesis;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };

    return (
    <div><Modal
        title="Modal"
        visible={this.props.thesis.editFormVisible}
        onOk={this.onSubmit}
        onCancel={this.onCancel}
        okText="保存"
        cancelText="取消">
      <Form>
        <Form.Item label="标题" {...formItemLayout} >
          {getFieldDecorator('title', {
            initialValue: thesis.title,
            rules: [{ required: true, message: '请输入论文标题' }],
          })(
            <Input placeholder="论文标题" />
          )}
        </Form.Item>
        <Form.Item label="分类" {...formItemLayout} >
          {getFieldDecorator('type', {
            initialValue: thesis.type,
          })(
            <Input placeholder="分类" />
          )}
        </Form.Item>
        <Form.Item label="期刊名称" {...formItemLayout} >
          {getFieldDecorator('journal', {
            initialValue: thesis.journal,
          })(
            <Input placeholder="期刊名称" />
          )}
        </Form.Item>
        <Form.Item label="关键字" {...formItemLayout} >
          {getFieldDecorator('keyword', {
            initialValue: thesis.keyword,
          })(
            <Input placeholder="关键字" />
          )}
        </Form.Item>
        <Form.Item label="作者" {...formItemLayout} >
          {getFieldDecorator('auth', {
            initialValue: thesis.auth,
            rules: [{
              message: "请输入作者",
            }]
          })(
            <Input placeholder="作者" />
          )}
        </Form.Item>
        <Form.Item label="发布时间" {...formItemLayout} >
          {getFieldDecorator('publishTime', {
            initialValue: thesis.publishTime
          })(
            <Input placeholder="发布时间" />
          )}
        </Form.Item>
        <Form.Item label="摘要" {...formItemLayout} >
          {getFieldDecorator('digest', {
            initialValue: thesis.digest,
          })(
            <Input.TextArea placeholder="摘要" rows={2} />
          )}
        </Form.Item>
      </Form>
      </Modal>
    </div>)
  }
};

const WrappedAddThesis = Form.create({})(AddThesis);
export default WrappedAddThesis;
